<script setup>
import { useRouter } from 'vue-router'; // 导入 useRouter
import { watch } from 'vue';
const router = useRouter(); // 获取 router 实例
//底部导航栏
const iconList = [
  { id: 1, title: "行情", path: "p1", isActive: true , url:"/" },
  { id: 2, title: "币币", path: "p2", isActive: false, url:"/bibi"  },
  { id: 3, title: "合约", path: "p3", isActive: false, url:"/Heyue"  },
  { id: 4, title: "币圈", path: "p4", isActive: false, url:"/biquan"  },
  { id: 5, title: "钱包", path: "p5", isActiv00e: false, url:"/Wallet"  },
];
// watch(router.path, (newVal, oldVal) => {
  
// });
/*const stopWatch = watch(router.path, (newVal, oldVal) => {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  });*/
const changeView = (item) => {
  // 获取导航栏所有元素
  const imgs = document.getElementsByClassName('imgPath');
  // 循环所有元素，判断当前点击的元素，修改其样式
  iconList.forEach((item) => {
    item.isActive = false;
  imgs[item.id - 1].src = `/src/assets/icon/footer-${item.path}-all${
            item.isActive ? '-red' : ''
          }.png`;
  });
  // 修改当前点击的元素
  iconList[item.id - 1].isActive = true;
  // 跳转路由
  router.push(item.url);
  // 修改图片
  imgs[item.id - 1].src = `/src/assets/icon/footer-${item.path}-all${
            item.isActive ? '-red' : ''
          }.png`;
};
</script>

<template>
 
  <div style="height: 80px;"></div>
    <div class="footer">
      <div v-for="item in iconList" :key="item.id" @click="changeView(item)">
        <img class="imgPath"
          :src="`/src/assets/icon/footer-${item.path}-all${
            item.isActive ? '-red' : ''
          }.png`"
          alt=""
        />
      </div>
    </div>
</template>

<style>
.footer {
    width: 500px;
    height: 50px;
    padding:5px 0;
    position: fixed;
    background-color: #fff;
    z-index: 999;
    bottom: 0;
    display: flex;
    justify-content: space-around;

    > div {
      width: 100px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      img {
        width: 30px;
      }
    }
  }
  .footer img{
    width: 40px;
    height: 50px;
  }
</style>